<template>
  <div class="header">
    <div class="one">
      <a href="#/">
        <img class="logo" src="@/assets/logo.png" width="30px" />
        <img class="logo2" src="@/assets/name.png" width="80px" />
      </a>
    </div>
    <div class="two">
      <el-menu
        :router="true"
        text-color="white"
        default-active="/index"
        class="el-menu-demo"
        background-color="dodgerblue"
        active-text-color="#ffd04b"
        mode="horizontal"
      >
        <el-menu-item index="/index">首页</el-menu-item>
        <el-menu-item index="/books/">图书</el-menu-item>
        <el-menu-item index="/vips/">用户</el-menu-item>
        <el-menu-item index="/processing/">待配送</el-menu-item>
        <el-menu-item index="/delivered/">已完结</el-menu-item>
        <el-menu-item index="/statistics/">统计</el-menu-item>
        <el-menu-item index="/logs/">日志</el-menu-item>
      </el-menu>
    </div>

    <div class="three">
      <el-dropdown @command="handleCommand" size="mini">
        <span class="el-dropdown-link"
          >{{ userName }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a" icon="el-icon-edit"
            >修改密码</el-dropdown-item
          >
          <el-dropdown-item command="b" icon="el-icon-s-unfold"
            >退出系统</el-dropdown-item
          >
          <el-dropdown-item command="c" icon="el-icon-s-opportunity"
            >公告管理</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <el-dialog title="修改密码" width="460px" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules"
        ref="pojo"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="pojo"
      >
        <el-form-item label="原密码" prop="passwords1" style="height: 36px">
          <el-input
            v-model="pojo.passwords1"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="passwords" style="height: 10px">
          <el-input
            v-model="pojo.passwords"
            type="password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePassword('pojo')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="公告管理"
      width="460px"
      :visible.sync="dialogFormVisible2"
    >
      <el-form
        :rules="rules2"
        ref="message"
        label-width="80px"
        label-position="right"
        style="width: 400px"
        :model="message"
      >
        <el-form-item label="公告1" prop="message1" style="height: 36px">
          <el-input v-model="message.message1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告2" prop="message2" style="height: 36px">
          <el-input v-model="message.message2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公告3" prop="message3" style="height: 10px">
          <el-input v-model="message.message3" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updateNotice('message')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { leave, update } from "@/api/login";
import noticeApi from "@/api/notice";
export default {
  data() {
    return {
      userName: "lb",
      dialogFormVisible: false,
      dialogFormVisible2: false,
      pojo: {
        codes: "",
        passwords1: "",
        passwords: "",
      },
      message: {
        message1: "",
        message2: "",
        message3: "",
      },
      rules: {
        passwords1: [
          { required: true, message: "原密码不能为空", trigger: "blur" },
        ],
        passwords: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
        ],
      },
      rules2: {
        message1: [
          { required: true, message: "公告不能为空", trigger: "blur" },
        ],
        message2: [
          { required: true, message: "公告不能为空", trigger: "blur" },
        ],
        message3: [
          { required: true, message: "公告不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.fetch();
    this.userName = sessionStorage.getItem("userName");
    this.fetchData();
  },
  // mounted(){
  //   this.fetch();
  // },
  methods: {
    fetchData() {
      this.pojo.codes = sessionStorage.getItem("codes");
    },
    fetch() {
      noticeApi.getAllNotice().then((response) => {
        this.message.message1 = response.data[0].messages;
        this.message.message2 = response.data[1].messages;
        this.message.message3 = response.data[2].messages;
      });
    },
    updatePassword(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          if (this.pojo.passwords1 != this.pojo.passwords) {
            update(
              this.pojo.codes,
              this.pojo.passwords1,
              this.pojo.passwords
            ).then((response) => {
              if (response.data == 1) {
                this.dialogFormVisible = false;
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.pojo.passwords1 = "";
                this.pojo.passwords = "";
              } else {
                this.$message({
                  type: "info",
                  message: "修改失败,密码错误！",
                });
                this.pojo.passwords1 = "";
                this.pojo.passwords = "";
              }
            });
          } else {
            this.$message({
              message: "未修改,两次密码相同！",
              type: "error",
            });
            this.pojo.passwords1 = "";
            this.pojo.passwords = "";
          }
        } else {
        }
      });
    },
    updateNotice(fromName) {
      this.$refs[fromName].validate((valid) => {
        if (valid) {
          noticeApi
            .updateNotice(
              this.message.message1,
              this.message.message2,
              this.message.message3
            )
            .then((response) => {
              if (response.data == 3) {
                this.dialogFormVisible2=false
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
              } else {
                this.$message({
                  message: "修改失败！",
                  type: "error",
                });
              }
            });
        }
      });
    },
    handleCommand(command) {
      switch (command) {
        case "a":
          this.dialogFormVisible = true;
          break;
        case "b":
          leave(sessionStorage.getItem("codes")).then((response) => {
            if (response.data.code == 200) {
              sessionStorage.removeItem("codes");
              sessionStorage.removeItem("userName");
              this.$router.push("/login");
            } else {
              this.$message({
                message: response.data.message,
                type: "error",
              });
            }
          });
          break;
        case "c":
          this.dialogFormVisible2 = true;
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style scoped>
.texts {
  position: absolute;
  color: white;
  font-size: 10px;
  left: 42%;
}
.logo {
  vertical-align: middle;
  padding: 0px 0px 0px 10px;
}
.logo2 {
  vertical-align: middle;
  padding: 0px 10px 0px 0px;
}
.el-dropdown {
  margin-right: 30px;
  float: right;
}
.el-dropdown-link {
  color: #dfdfdf;
  cursor: pointer;
}
.el-dropdown-link {
  font-size: 6px;
}

.el-menu-demo {
  height: 10px;
  font-size: 4px;
}

.one {
  float: left;
  width: 30%;
  background-color: dodgerblue;
}
.two {
  float: left;
  width: 58%;
  background-color: dodgerblue;
}
.three {
  float: right;
  width: 12%;
  background-color: dodgerblue;
}

.el-menu-item.is-active:hover {
  background-color: dodgerblue;
}

.el-menu-item:hover {
  background-color: dodgerblue !important;
}
.el-menu.el-menu--horizontal {
  border-bottom: solid 0px;
}
.el-menu-item {
  height: 40px !important;
  font-size: 12px !important;
}
</style>